<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            bottom: 0;
            text-decoration: none;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            /* 背景渐变 */
            background-image: linear-gradient(to bottom right,
             #91defe,#99c0f9,#bdb6ec,#d7b3e3,#efb3d5,#f9bccc);
        }
        .shell{
            width: 700px;
            height: 400px;
            position: relative;
            /* background-color: #fff; */
            border-radius: 15px;
            box-shadow: 20px 30px 20px rgba(0,0,0,0.25);
            overflow: hidden;
        }
        .images{
            width: 500%;
            height: 100%;
            display: flex;
            position: absolute;
            left: 0;
            /* transition: .2s; */
            /* 设置过渡效果 */
            transition: opacity .2s ease-in-out; 
        }
        .img-lun{
            width: 100%;
            background-size: cover;
            /* 淡入淡出效果 */
            transition: opacity .2s ease-in-out; 
        }
        .img-lun:nth-child(1){
            background-image: url(./images/1.jpg);
        }
        .img-lun:nth-child(2){
            background-image: url(./images/2.jpg);
        }
        .img-lun:nth-child(3){
            background-image: url(./images/3.jpg);
        }
        .img-lun:nth-child(4){
            background-image: url(./images/4.jpg);
        }
        .img-lun:nth-child(5){
            background-image: url(./images/5.jpg);
        }
        .min{
            display: flex;
            justify-content: space-evenly;
            position: absolute;
            bottom: 20px;
            width: 30%;
            z-index: 999;
            left: 50%;
            transform: translateX(-50%);
            /* left: 50%; 将元素的左边缘定位到父元素的中点。
然后，transform: translateX(-50%); 将元素自身向左移动一半的宽度，从而使整个元素居中于父元素。    */
        }
        .m{
            width: 10px;
            height: 10px;
            /* 这个属性用于指定当用户将鼠标指针悬停在该元素上时，光标的样式会更改为手指形状 */
            cursor: pointer;
            border-radius: 50%;
            border: solid rgba(255,255,255,0.5) 5px;
            background-color: #fff;
        }
        .button-lun{
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            /* 这个属性用于控制用户是否可以选中元素的文本。 */
            user-select: none;
        }
        .button-left,.button-right{
            font-size: 50px;
            background-color: rgba(160,193,255,0.2);
            padding: 0 20px;
            cursor: pointer;
            line-height: 400px;
            color: #fff;
        }
    </style>
</head>
<!-- 快捷键：.类名，元素.类名 -->
<body>
    <div class="shell">
        <ul class="images">
            <li class="img-lun"></li>
            <li class="img-lun"></li>
            <li class="img-lun"></li>
            <li class="img-lun"></li>
            <li class="img-lun"></li>
        </ul>
        <ul class="min">
            <li class="m"></li>
            <li class="m"></li>
            <li class="m"></li>
            <li class="m"></li>
            <li class="m"></li>
        </ul>
        <div class="button-lun">
            <div class="button-left">&lt;</div>
            <div class="button-right">&gt;</div>
        </div>
    </div>
</body>
<script>
    let images = document.querySelector('.images')
    let m = document.querySelectorAll('.m')
    let left = document.querySelector('.button-left')
    let right = document.querySelector('.button-right')
    //我们先设置一个index用来计算和控制图片的位置，再设置一个time作为定时器
    let index = 0
    //在这里我们先创建一个position为复用函数，作用就是结合index来定义当前图片的位置的
    let time = null
    function position(){
        images.style.left = (index*-100)+'%'
    }
//     然后我们创建一个复用函数add为加函数，如果当前图片的位置值index大于等于当前图片数量的话
// 就说明超出了计算范围，所以得清零，如若不然index就加1
    function add(){
        if(index >= m.length-1){
            index = 0
        }else{
            index++
        }        
    }
    // desc为减函数，如果当前图片的位需值index小于1了，那么他的值就反弹到最顶端，也就是轮播图的最后面，如若不然index就减1
    function desc(){
        if(index < 1){
            index = m.length-1
        }else{
            index--
        }
        
    }
    // 创建一个timer来当做复用时间的函数，每隔3秒钟index就加1，然后加入增加add函数和desc函数来判断一下，再加入定位函数
    // 轮播图
    function timer(){
        time = setInterval(()=>{
            index++
            desc()
            add()
            position()
        },2000)
    }
    // 接下来我们设需一下按钮，left为左边的按钮，因为点击时图片会反方向倒退，所以我们套入desc减函数进去，顺使定位一
//点击的时候我们必须先把定时器给停掉再重新执行一遍，不然会在你点击下一张图片时，定时器倒计时一到也跟着生效，这样子就会连跳两张图片了
    left.addEventListener('click',()=>{
        desc()
        position()
        clearInterval(time)
        timer()
    })
    right.addEventListener('click',()=>{
        add()
        position()
        clearInterval(time)
        timer()
    })
    // 在弄好左右两个按钮的时候，我们还需要生效下面的小图片按钮
// 然后获取当前点击的那个小图片按钮的值并赋值给index，这样子就可以随之跳转
    for(let i=0;i<m.length;i++){
        m[i].addEventListener('click',()=>{
            index = i
            position()
            clearInterval(time)
            timer()
        })
    }
    //最后的最后我们将定时器开起来，这样子图片就可以自动轮播啦
    timer()
</script>
</html>